<template>
    <!-- pages/wallet/bankcardmanagement/index.wxml -->
    <view>
        <view class="swipe">
            <van-swipe-cell :right-width="70" @close="onClose" v-for="(item, index) in tfslist" :key="index">
                <view class="cardbox" @tap="onBalk" :data-item="item">
                    <image :src="item.bgimg" class="bg-img"></image>
                    <view class="zindex">
                        <view class="logobox">
                            <image class="logo-img" :src="item.logoimg"></image>
                        </view>
                        <view>
                            <view class="name">{{ item.typeName }}</view>
                            <view class="type">储蓄卡</view>
                            <view class="num centers mt-20">
                                <text>****</text>
                                <text>****</text>
                                <text>****</text>
                                <text>{{ item.newcardNo }}</text>
                            </view>
                        </view>
                    </view>
                </view>

                <view slot="right" class="right" :data-id="item.id" @tap.stop.prevent="unBundle">解绑</view>
            </van-swipe-cell>
        </view>

        <view class="add mt-40 centers" @tap="addCard">
            <text class="mr-20">+</text>
            添加银行卡
        </view>
        <view class="bottomtext">到底了呢~</view>
    </view>
</template>

<script>
// pages/wallet/bankcardmanagement/index.js
const app = getApp(); // 引入app

import _request from '../../../utils/request.js';
export default {
    data() {
        return {
            imgUrl: app.globalData.imgUrl,
            //全局img路径
            tfslist: [],
            bank: null,
            openType: 5 //是否在厦门银行实名过 (5未实名，1是已实名)
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        // 获取用户已绑定的银行卡列表
        this.getfindTfsCardList(); // 是否在厦门银行实名过 (data=5未实名，1是已实名)

        _request
            .get('/tfs/checkUserStatus', {
                userId: uni.getStorageSync('userid')
            })
            .then((res) => {
                this.setData({
                    openType: res.data.data
                });
            });
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        // 添加银行卡
        addCard() {
            uni.navigateTo({
                url: this.openType == 1 ? '/pages/wallet/addbankcard/index' : '/pages/wallet/checkAccount/index'
            });
        },

        // 返回
        onBalk(e) {
            const { item } = e.currentTarget.dataset;
            let pages = getCurrentPages();
            let prevPage = pages[pages.length - 2];
            prevPage.setData({
                //对上页面进行赋值
                bank: item
            });
            uni.navigateBack({
                delta: 1
            });
        },

        // 解绑
        unBundle(e) {
            // 解绑账户
            // _request.postObj('/settings/unBind', {
            //   userId: wx.getStorageSync('userid'),
            //   bindId: e.currentTarget.dataset.id
            // }).then((res) => {
            //   if (res.data.code == 200) {
            //     wx.showToast({
            //       title: res.data.message,
            //       icon: 'none',
            //       duration: 1000
            //     })
            //     // 获取用户已绑定的银行卡列表
            //     this.getfindTfsCardList()
            //   }
            // }).catch((error) => {
            //   console.log(error, 'error');
            // })
            // 解绑账户银行卡
            _request
                .get('/tfs/unCard', {
                    id: e.currentTarget.dataset.id
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        uni.showToast({
                            title: res.data.message,
                            icon: 'none',
                            duration: 1000
                        }); // 获取用户已绑定的银行卡列表

                        this.getfindTfsCardList();
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        // 获取用户已绑定的银行卡列表
        getfindTfsCardList() {
            _request
                .get('/tfs/findTfsCardList', {
                    userId: uni.getStorageSync('userid')
                })
                .then((res) => {
                    if (res.data.data) {
                        this.setData({
                            tfslist: res.data.data.map((item) => {
                                let disLength = item.cardNo.length;
                                let shortName = item.cardNo.substring(disLength - 4, disLength);
                                item.newcardNo = shortName;
                                item.bgimg = this.imgUrl + 'background_' + item.shortName.toLowerCase() + '/static/pages/wallet/bankcardmanagement/.png';
                                item.logoimg = this.imgUrl + 'icon_' + item.shortName.toLowerCase() + '/static/pages/wallet/bankcardmanagement/1_nor.png';
                                return item;
                            })
                        });
                    } else if (res.data.message == '暂未实名!') {
                        uni.hideToast({}); // wx.showModal({
                        //   title: '您还未在银行系统实名或未通过',
                        //   content: '请先前往实名认证',
                        //   success(res) {
                        //     if (res.confirm) {
                        //       wx.navigateTo({
                        //         url: '/pages/wallet/addbankcard/index',
                        //       })
                        //     } else if (res.cancel) {}
                        //   }
                        // })
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        onClose() {
            console.log('占位：函数 onClose 未声明');
        }
    }
};
</script>
<style>
/* pages/wallet/bankcardmanagement/index.wxss */
.swipe {
    margin: 0 20rpx;
}

.cardbox {
    width: 710rpx;
    height: 185rpx;
    border-radius: 10px;
    box-sizing: border-box;
    margin-top: 20rpx;
}

.bg-img {
    width: 710rpx;
    height: 185rpx;
    position: absolute;
}
.logobox {
    padding: 0 30rpx 0 50rpx;
}

.logo-img {
    width: 70rpx;
    height: 70rpx;
}
.name {
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
}

.zindex {
    z-index: 2;
    position: absolute;
    display: flex;
    padding-top: 20rpx;
}

.type {
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #eebdc0;
}

.num text {
    margin-right: 20rpx;
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
}

.right {
    width: 140rpx;
    height: 185rpx;
    background: #ed3403;
    border-radius: 0px 10px 10px 0px;
    line-height: 185rpx;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #fffefe;
    text-align: center;
}

.add {
    width: 710rpx;
    height: 86rpx;
    background: #ffffff;
    box-shadow: 0px 1px 29px 0px rgba(0, 0, 0, 0.04);
    border-radius: 10px;
    justify-content: center;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 86rpx;
    margin: 20rpx;
}

.add text:nth-child(1) {
    font-size: 50rpx;
    font-weight: 500;
}

.bottomtext {
    width: 100%;
    text-align: center;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
    margin-top: 130rpx;
}
</style>
